<template>
  <div class="zs-card-sm zs-space-bottom demo-search-container">
    <span>
      <el-select v-model="value" class="zs-select-md zs-space-right-sm" placeholder="项目名称" clearable>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="curStatus" class="zs-select-md zs-space-right-sm" placeholder="请选择" clearable>
        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input class="zs-select-md zs-space-right-sm" v-model="value" placeholder="业态" clearable />
      <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
        <template #reference>
          <el-button class="zs-btn-square-solid" :class="{'zs-btn-square-solid-active': curName || curCode}">
            <el-icon>
              <MoreFilled />
            </el-icon>
          </el-button>
        </template>
        <template #default>
          <el-input class="zs-select-md zs-space-right-sm" v-model="curCode" placeholder="项目编码" clearable />
          <el-input class="zs-select-md zs-space-right-sm" v-model="curName" placeholder="审核状态" clearable />
        </template>
      </el-popover>
      <el-button class="zs-btn-plain" v-log="{type: 4, resourceKey: 'p_btn_project_create'}">
        查询
      </el-button>
    </span>
    <span>
      <el-button class="zs-btn-plain zs-btn-md">
        <el-icon class="el-icon--left">
          <Upload />
        </el-icon>导出
      </el-button>
      <el-button class="zs-btn-plain zs-btn-md" @click="openImportDataDrawer()">
        <el-icon class="el-icon--left">
          <Download />
        </el-icon>导入
      </el-button>
      <el-button class="zs-btn-md zs-btn-plain"><el-icon class="el-icon--left"><FolderChecked /></el-icon>保存</el-button>
      <el-button class="zs-btn-md zs-btn-primary" @click="getApi()">提交</el-button>
    </span>
  </div>
  <div class="zs-card zs-space-bottom">
    <div class="zs-text-gray-dark zs-text-sm zs-space-bottom">
      <span class="zs-space-right-bg">总建筑面积：489,703.00 ㎡</span>
      <span class="zs-space-right-bg">规划用途：商业</span>
      <span class="zs-space-right-bg">计划总工期合计 810 天（注：计算从工程开工到开业的总时间）</span>
    </div>
    <el-table :data="tableData" height="300px" stripe>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="code" label="项目编码" width="200" align="left" />
      <el-table-column prop="name" label="项目名称" width="270" align="left">
        <template #default="scope">
          <el-tooltip effect="dark" :content="scope.row.name" placement="top">
            <div class="zs-text-ellipsis cur-table-cell-width">{{scope.row.name}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="projectType" label="业态" align="center" />
      <el-table-column prop="projectSize" label="建筑总面积" align="right" />
      <el-table-column prop="projectSize" label="净租赁面积" align="right" />
      <el-table-column prop="status" label="生效状态" width="80" align="center">
        <template #default="scope">
          <div
            :class="{'zs-validata-status-yes': scope.row.status == 1,'zs-validata-status-no': scope.row.status == 0}">
            {{scope.row.status
            == 1 ? '有效' : '失效'}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="approveStatus" label="审核状态" width="80" align="center">
        <template #default="scope">
          <div
            :class="{'zs-approval-status-yes': scope.row.approveStatus == '已通过', 'zs-approval-status-no': scope.row.approveStatus == '已驳回', 'zs-approval-status-wait': scope.row.approveStatus == '待审核'}">
            {{scope.row.approveStatus}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="approveTime" label="审核时间" width="100" align="center" />
      <el-table-column prop="" label="定义" width="180" align="center">
        <template #default>
          <el-button class="zs-link" link size="small" @click="openSmallFormDrawer(true)">查看</el-button>
          <el-divider direction="vertical" />
          <el-button class="zs-link" link size="small" @click="openSmallFormDrawer(false)">编辑</el-button>
          <el-divider direction="vertical" />
          <el-button class="zs-link" link size="small" @click="openDeleteDrawer">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="" label="配置" width="120" align="center">
        <template #default>
          <el-button class="zs-link" link size="small" @click="openFormDrawer(true)" disabled>查看</el-button>
          <el-divider direction="vertical" />
          <el-button class="zs-link" link size="small" @click="openFormDrawer(false)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="zs-text-gray-dark zs-text-sm zs-space-top">*面积单位为平方米</div>
    <div class="zs-pagination zs-space-top-sm">
      <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
        :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
  <div class="zs-card-with-header">
    <div class="zs-card-header">
      <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
      <div class="zs-title">节点信息</div>
    </div>
    <div class="zs-card-content">
      <div class="zs-text-gray-dark zs-text-sm zs-space-bottom">
        <span class="zs-space-right-bg">总建筑面积：489,703.00 ㎡</span>
        <span class="zs-space-right-bg">规划用途：商业</span>
        <span class="zs-space-right-bg">计划总工期合计 810 天（注：计算从工程开工到开业的总时间）</span>
      </div>
      <el-table :data="tableData" stripe>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="code" label="项目编码" width="200" align="left" />
        <el-table-column prop="name" label="项目名称" align="left">
          <template #default="scope">
            <el-tooltip effect="dark" :content="scope.row.name" placement="top">
              <div class="zs-text-ellipsis cur-table-cell-width">{{scope.row.name}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="projectType" label="业态" align="center" />
        <el-table-column prop="projectSize" label="建筑总面积" align="right" />
        <el-table-column prop="projectSize" label="净租赁面积" align="right" />
        <el-table-column prop="status" label="生效状态" width="80" align="center">
          <template #default="scope">
            <div
              :class="{'zs-validata-status-yes': scope.row.status == 1,'zs-validata-status-no': scope.row.status == 0}">
              {{scope.row.status
              == 1 ? '有效' : '失效'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="approveStatus" label="审核状态" width="80" align="center">
          <template #default="scope">
            <div
              :class="{'zs-approval-status-yes': scope.row.approveStatus == '已通过', 'zs-approval-status-no': scope.row.approveStatus == '已驳回', 'zs-approval-status-wait': scope.row.approveStatus == '待审核'}">
              {{scope.row.approveStatus}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="approveTime" label="审核时间" width="100" align="center" />
        <el-table-column prop="" label="定义" width="180" align="center">
          <template #default>
            <el-button class="zs-link" link size="small" @click="openSmallFormDrawer(true)">查看</el-button>
            <el-divider direction="vertical" />
            <el-button class="zs-link" link size="small" @click="openSmallFormDrawer(false)">编辑</el-button>
            <el-divider direction="vertical" />
            <el-button class="zs-link" link size="small" @click="openDeleteDrawer">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="" label="配置" width="120" align="center">
          <template #default>
            <el-button class="zs-link" link size="small" @click="openFormDrawer(true)">查看</el-button>
            <el-divider direction="vertical" />
            <el-button class="zs-link" link size="small" @click="openFormDrawer(false)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="zs-text-gray-dark zs-text-sm zs-space-top">*面积单位为平方米</div>
      <div class="zs-card-append zs-space-top">
        <div>1、股东资金投入峰值在2021年为8.3亿元；</div>
        <div>2、不含自持物业经营利润，项目税后利润42%</div>
        <div>3、全盘销售均价8.1万元/㎡，价格区间 6.8 - 9.6万元</div>
      </div>
    </div>
  </div>

  <el-button class="zs-space-top zs-btn-primary" type="primary" @click="openSmallFormDrawer(false)">打开表单抽屉01</el-button>
  <el-button class="zs-space-top zs-btn-primary" type="primary" @click="openFormDrawer(false)">打开表单抽屉02</el-button>
  <el-button class="zs-space-top zs-btn-primary" type="primary" @click="openFormDrawer(true)">打开不可编辑的表单抽屉</el-button>
  <el-button class="zs-space-top zs-btn-primary" type="primary" @click="openDetailDrawer" disabled>打开详情抽屉</el-button>
  <el-button class="zs-space-top zs-btn-primary" type="primary" @click="openDeleteDrawer">打开删除抽屉</el-button>

  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">默认字号14px，颜色#333333</div>
    <div class="zs-text-sm zs-space-top">小字： zs-text-sm</div>
    <div class="zs-text-md zs-space-top">中字： zs-text-md</div>
    <div class="zs-text-bg zs-space-top">大字： zs-text-bg</div>
    <el-divider />
    <div class="zs-text-black zs-space-top">黑色字： zs-text-black</div>
    <div class="zs-text-red zs-space-top">红色字： zs-text-red</div>
    <div class="zs-text-orange zs-space-top">橘色字： zs-text-orange</div>
    <div class="zs-text-green zs-space-top">绿色字： zs-text-green</div>
    <div class="zs-text-blue zs-space-top">蓝色字： zs-text-blue</div>
    <div class="zs-text-gray-dark zs-space-top">深灰色字： zs-text-gray-dark</div>
    <div class="zs-text-gray zs-space-top">灰色字： zs-text-gray</div>
    <div class="zs-text-gray-light zs-space-top">浅灰色字（跟border一个颜色）： zs-text-gray-light</div>
    <el-divider />
    <div class="zs-space-top">文本超过指定宽度显示省略号： zs-text-ellipsis</div>
    <div class="zs-text-ellipsis zs-space-top" style="width: 200px">
      例如：文本超过指定宽度显示省略号文本超过指定宽度显示省略号文本超过指定宽度显示省略号文本超过指定宽度显示省略号</div>
  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">针对表格公共列设置的样式：【生效状态】【审核状态】</div>
    <el-divider />
    <div class="zs-validata-status-yes zs-space-top">生效状态-有效： zs-validata-status-yes</div>
    <div class="zs-validata-status-no zs-space-top">生效状态-无效： zs-validata-status-no</div>
    <el-divider />
    <div class="zs-approval-status-yes zs-space-top">审核状态-已通过： zs-approval-status-yes</div>
    <div class="zs-approval-status-wait zs-space-top">审核状态-待审核： zs-approval-status-wait</div>
    <div class="zs-approval-status-no zs-space-top">审核状态-已驳回： zs-approval-status-no</div>
  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">标题</div>
    <div class="zs-title-sm zs-space-top">16px的标题：zs-title-sm</div>
    <div class="zs-title zs-space-top">18px的标题：zs-title</div>
    <div class="zs-space-top">18px标题前的icon：zs-icon</div>
    <div class="zs-align-center zs-space-top">
      <div class="zs-icon zs-text-blue zs-space-right-sm">
        <el-icon>
          <Grid />
        </el-icon>
      </div>
    </div>
  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">小间距8px，常用12px，大间距24px，超大间距40px</div>
    <div class="zs-space-top">上间距(小)： zs-space-top-sm</div>
    <div class="zs-space-top">下间距(小)： zs-space-bottom-sm</div>
    <div class="zs-space-top">左间距(小)： zs-space-left-sm</div>
    <div class="zs-space-top">右间距(小)： zs-space-right-sm</div>
    <el-divider />
    <div class="zs-space-top">上间距： zs-space-top</div>
    <div class="zs-space-top">下间距： zs-space-bottom</div>
    <div class="zs-space-top">左间距： zs-space-left</div>
    <div class="zs-space-top">右间距： zs-space-right</div>
    <el-divider />
    <div class="zs-space-top">上间距(大)： zs-space-top-bg</div>
    <div class="zs-space-top">下间距(大)： zs-space-bottom-bg</div>
    <div class="zs-space-top">左间距(大)： zs-space-left-bg</div>
    <div class="zs-space-top">右间距(大)： zs-space-right-bg</div>
    <el-divider />
    <div class="zs-space-top">上间距(超大)： zs-space-top-lg</div>
    <div class="zs-space-top">下间距(超大)： zs-space-bottom-lg</div>
    <div class="zs-space-top">左间距(超大)： zs-space-left-lg</div>
    <div class="zs-space-top">右间距(超大)： zs-space-right-lg</div>
    <el-divider />
    <div class="zs-space-top">间距使用的基本规则</div>
    <div class="zs-space-top">小元素左右间距8px，zs-space-left-sm，zs-space-right-sm</div>
    <div class="zs-space-top">card上下间距12px，zs-space-top，zs-space-bottom</div>
    <div class="zs-space-top">不同的区域标题，距离上面40px，zs-space-top-lg，距离下面12px，zs-space-bottom-sm</div>
    <div class="zs-space-top">表格上面的文字描述信息，距离表格12，zs-space-bottom</div>
  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">按钮</div>
    <div class="zs-space-top">link按钮：zs-link</div>
    <el-button class="zs-link zs-space-top" link size="small">查看</el-button>
    <el-button class="zs-link zs-space-top" link size="small">编辑</el-button>
    <el-button class="zs-link zs-space-top" link size="small">删除</el-button>
    <div class="zs-space-top">按钮(需要统一按钮大小时使用)： zs-btn-md</div>
    <div class="zs-space-top">
      <el-button class="zs-btn-md zs-btn-plain">取消</el-button>
      <el-button class="zs-btn-md zs-btn-primary">确定</el-button>
    </div>
    <div class="zs-space-top">正方形按钮实线边框： zs-btn-square-solid，zs-btn-square-solid-active(active状态)</div>
    <div class="zs-space-top">正方形按钮虚线边框(加减时使用，虚线边框，中间适合放一个icon)： zs-btn-square-dashed</div>
    <div class="zs-space-top">正方形按钮(hover状态为蓝色)： zs-btn-square-blue</div>
    <div class="zs-space-top">正方形按钮(hover状态为红色)： zs-btn-square-red</div>
    <div class="zs-align-center zs-space-top">
      <el-button class="zs-btn-square-solid">
        <el-icon>
          <MoreFilled />
        </el-icon>
      </el-button>
      <el-button class="zs-btn-square-dashed">
        <el-icon>
          <Setting />
        </el-icon>
      </el-button>
      <el-button class="zs-btn-square-dashed zs-btn-square-red">
        <el-icon>
          <Minus />
        </el-icon>
      </el-button>
      <el-button class="zs-btn-square-dashed zs-btn-square-blue">
        <el-icon>
          <Plus />
        </el-icon>
      </el-button>
    </div>
    <div class="zs-space-top">长方形按钮(虚线边框，撑满整个宽度)： zs-btn-rectangle</div>
    <el-button class="zs-btn-rectangle zs-space-top">
      <el-icon>
        <Plus />
      </el-icon>
      添加类别
    </el-button>
    <div class="zs-space-top">长方形按钮(虚线边框，撑满整个宽度)： zs-btn-rectangle-danger</div>
    <el-button class="zs-btn-rectangle-danger zs-space-top">
      删除
    </el-button>
    <div class="zs-space-top">tag按钮-蓝色：zs-tag-blue</div>
    <div class="zs-tag-blue zs-space-top">12小时</div>
    <div class="zs-space-top">tag按钮-红色：zs-tag-red</div>
    <div class="zs-tag-red zs-space-top">12小时</div>
  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">card</div>
    <div class="zs-space-top">白色card【默认使用这个】：zs-card</div>
    <div class="zs-space-top">白色card小尺寸【针对表格上方搜索区域】：zs-card-sm</div>
    <div class="zs-space-top">白色card大尺寸【padding: 24px，目前只在导入数据的抽屉中使用到】：zs-card-lg</div>
    <div class="zs-space-top">带header的card: zs-card-with-header</div>
    <div class="zs-space-top">带header的card中的header：zs-card-header</div>
    <div class="zs-space-top">带header的card中的content：zs-card-content</div>
    <div class="zs-space-top">灰色card：zs-card-gray</div>
    <div class="zs-space-top zs-card-gray" style="width: 300px;">
      合生汇位于西大望路与广渠路交汇处，地铁14号线九龙山站附近，地处东三环外，定位于集购物、餐饮、娱乐、休闲、儿童体验业态于一体的精致生活体验式购物中心，合生汇的深夜食堂约2万平方米，
      6点。</div>
    <div class="zs-space-top">表格追加信息：zs-card-append</div>
    <div class="zs-space-top zs-card-append" style="width: 300px;">
      <div>1、股东资金投入峰值在2021年为8.3亿元；</div>
      <div>2、不含自持物业经营利润，项目税后利润42%</div>
      <div>3、全盘销售均价8.1万元/㎡，价格区间 6.8 - 9.6万元</div>
    </div>
  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">固定宽度的下拉选&固定宽度的输入框</div>
    <div class="zs-space-top">现在统一宽度是220px</div>
    <div class="zs-space-top">固定宽度的下拉选：zs-select-md</div>
    <el-select v-model="value" class="zs-select-md zs-space-top zs-space-right-sm" placeholder="Select">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <div class="zs-space-top">固定宽度的输入框：zs-input-md</div>
    <div class="zs-align-center zs-space-top">
      <el-input class="zs-input-md zs-space-right-sm" v-model="value" placeholder="请输入" />
      <el-input class="zs-input-md" v-model="value" :maxlength="curTextareaLength" placeholder="请输入" show-word-limit
        type="textarea" />
    </div>
  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">表格：表头样式已在resetElementPlus中设置</div>
    <div class="zs-space-top">无表头的表格：zs-table-header-none</div>
  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">布局</div>
    <div class="zs-space-top">水平居中：zs-align-center</div>
    <div class="zs-space-top">宽度100%的元素：zs-full-item</div>
  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">复合型输入框</div>
    <div class="zs-space-top">复合型输入框 -- 设置前面和后面单位的样式 -- 底色为白色： zs-input-group-white</div>
    <div class="zs-space-top">复合型输入框 -- 设置前面和后面单位的样式 -- 宽度为80px： zs-input-group-md</div>
    <el-input class="zs-input-md zs-input-group-white zs-input-group-md zs-space-top" v-model="value"
      placeholder="1000~5000">
      <template #append>
        <div>元/m²/月</div>
      </template>
    </el-input>
    <br>
    <el-input class="zs-input-md zs-input-group-white zs-space-top" v-model="value" placeholder="1号线">
      <template #prepend>
        <div>名称</div>
      </template>
    </el-input>
    <br>
    <el-input class="zs-input-md zs-input-group-white zs-space-top" v-model="value" placeholder="200">
      <template #prepend>
        <div>距离</div>
      </template>
      <template #append>
        <div>米</div>
      </template>
    </el-input>
    <div class="zs-space-top">复合型输入框 -- disabled状态</div>
    <el-input class="zs-input-md zs-input-group-md zs-space-top" v-model="value" disabled placeholder="1000~5000">
      <template #append>
        <div>元/m²/月</div>
      </template>
    </el-input>
    <br>
    <el-input class="zs-input-md zs-space-top" v-model="value" placeholder="200" disabled>
      <template #prepend>
        <div>距离</div>
      </template>
      <template #append>
        <div>米</div>
      </template>
    </el-input>

  </div>
  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">分页</div>
    <div class="zs-space-top">默认靠右，分页[15, 30, 50, 100]， 默认每页 15，zs-pagination</div>
    <div class="zs-pagination zs-space-top-sm">
      <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
        :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>

  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">滚动条</div>
    <div class="zs-space-top">默认使用element自带的即可，el-scrollbar，如果遇到特殊情况，比如输入框拉伸滚动条卡顿，用这个样式【zs-scrollbar】</div>
    <div class="zs-scrollbar zs-card-append zs-space-top" style="height: 100px; overflow: scroll;">
      <div>滚动条演示</div>
      <div>滚动条演示</div>
      <div>滚动条演示</div>
      <div>滚动条演示</div>
      <div>滚动条演示</div>
      <div>滚动条演示</div>
      <div>滚动条演示</div>
    </div>
  </div>

  <div class="zs-card zs-space-top">
    <div class="zs-text-bg zs-text-blue">全局变量配置</div>
    <div class="zs-space-top">抽屉尺寸：670px【uiDrawerSize】</div>
    <div class="zs-space-top">大抽屉尺寸：900px【uiDrawerSizeBig】</div>
    <!-- <div class="zs-space-top">主按钮颜色：#477AFD【uiBlue】</div> -->
    <div class="zs-space-top">分页切换每页数据：15, 30, 50, 100【uiPageSizes】</div>
    <div class="zs-space-top">分页默认每页条数：15【uiPageSizeDefault】</div>
    <div class="zs-space-top">文本域最大字数：140【uiTextareaLength】</div>
  </div>


  <FormDrawerDemo v-if="isShowFormDrawer" :isShow="isShowFormDrawer" :isReadonly="isReadonly" @close="closeFormDrawer">
  </FormDrawerDemo>
  <SmallFormDrawerDemo v-if="isShowSmallFormDrawer" :isShow="isShowSmallFormDrawer" :isReadonly="isReadonly"
    @close="closeSmallFormDrawer">
  </SmallFormDrawerDemo>
  <DetailDrawerDemo v-if="isShowDetailDrawer" :isShow="isShowDetailDrawer" @close="closeDetailDrawer">
  </DetailDrawerDemo>
  <deleteDrawer v-if="isShowDeleteDrawer" :isShow="isShowDeleteDrawer" @close="closeDeleteDrawer">
  </deleteDrawer>
  <ImportData v-if="isShowImportDataDrawer" :isShow="isShowImportDataDrawer" @close="closeImportDataDrawer">
  </ImportData>
</template>
<script setup>
import FormDrawerDemo from '@/views/FormDrawerDemo.vue'
import SmallFormDrawerDemo from '@/views/SmallFormDrawerDemo.vue'
import DetailDrawerDemo from '@/views/DetailDrawerDemo.vue'
import deleteDrawer from '@/components/deleteDrawer.vue'
import ImportData from '@/components/ImportData.vue'
import { ref } from 'vue'
import { useStore } from 'vuex'
let store = useStore()
const curTextareaLength = ref(store.state.uiTextareaLength)
const curPageSizes = ref(store.state.uiPageSizes)
const curPageSize = ref(store.state.uiPageSizeDefault)
// 分页
const currentPage = ref(4)
const total = ref(500)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

const curName = ref('')
const curCode = ref('')

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  }
]

const curStatus = ref('')
const statusList = ref([
  { value: '', label: '全部' },
  { value: '1', label: '有效' },
  { value: '0', label: '失效' },
])

const tableData = [
  {
    code: 'XMBM1001000',
    name: '北京朝阳合生汇写字楼项目',
    projectType: '综合体',
    projectSize: '213539',
    status: 1,
    approveStatus: '待审核',
    approveTime: '2022-9-14',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    code: 'XMBM1001000',
    name: '北京朝阳合生汇写字楼项目',
    projectType: '综合体',
    projectSize: '213539',
    status: 1,
    approveStatus: '已通过',
    approveTime: '2022-9-14',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    code: 'XMBM1001000',
    name: '北京朝阳合生汇写字楼项目',
    projectType: '综合体',
    projectSize: '2135.39',
    status: 1,
    approveStatus: '已驳回',
    approveTime: '2022-9-14',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    code: 'XMBM1001',
    name: '北京朝阳合生汇项目北京朝阳合生汇项目北京朝阳合生汇项目北京朝阳合生汇项目北京朝阳合生汇项目',
    projectType: '商场',
    projectSize: '5769',
    status: 0,
    approveStatus: '--',
    approveTime: '--',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    code: 'XMBM1001000',
    name: '北京朝阳合生汇写字楼项目',
    projectType: '综合体',
    projectSize: '213539',
    status: 1,
    approveStatus: '已通过',
    approveTime: '2022-9-14',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    code: 'XMBM1001000',
    name: '北京朝阳合生汇写字楼项目',
    projectType: '综合体',
    projectSize: '213539',
    status: 1,
    approveStatus: '已通过',
    approveTime: '2022-9-14',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    code: 'XMBM1001000',
    name: '北京朝阳合生汇写字楼项目',
    projectType: '综合体',
    projectSize: '213539',
    status: 1,
    approveStatus: '已通过',
    approveTime: '2022-9-14',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    code: 'XMBM1001000',
    name: '北京朝阳合生汇写字楼项目',
    projectType: '综合体',
    projectSize: '213539',
    status: 1,
    approveStatus: '已通过',
    approveTime: '2022-9-14',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    code: 'XMBM1001000',
    name: '北京朝阳合生汇写字楼项目',
    projectType: '综合体',
    projectSize: '213539',
    status: 1,
    approveStatus: '已通过',
    approveTime: '2022-9-14',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    code: 'XMBM1001000',
    name: '北京朝阳合生汇写字楼项目',
    projectType: '综合体',
    projectSize: '213539',
    status: 1,
    approveStatus: '已通过',
    approveTime: '2022-9-14',
    address: 'No. 189, Grove St, Los Angeles',
  }
]

let isReadonly = ref(false)
let isShowFormDrawer = ref(false)
const openFormDrawer = (data) => {
  isReadonly.value = data
  isShowFormDrawer.value = true
}
const closeFormDrawer = (data) => {
  isShowFormDrawer.value = data.isShow
}

let isShowSmallFormDrawer = ref(false)
const openSmallFormDrawer = (data) => {
  isReadonly.value = data
  isShowSmallFormDrawer.value = true
}
const closeSmallFormDrawer = (data) => {
  isShowSmallFormDrawer.value = data.isShow
}


let isShowDetailDrawer = ref(false)
const openDetailDrawer = () => {
  isShowDetailDrawer.value = true
}
const closeDetailDrawer = (data) => {
  isShowDetailDrawer.value = data.isShow
}

let isShowDeleteDrawer = ref(false)
const openDeleteDrawer = () => {
  isShowDeleteDrawer.value = true
}
const closeDeleteDrawer = (data) => {
  isShowDeleteDrawer.value = data.isShow
  if (data.isDelete) {
    // 执行删除操作
  }
}

let isShowImportDataDrawer = ref(false)
const openImportDataDrawer = () => {
  isShowImportDataDrawer.value = true
}
const closeImportDataDrawer = (data) => {
  isShowImportDataDrawer.value = data.isShow
}


const getLocal = () => {
  const portalUseAppList = localStorage.getItem('portalUseAppList');
  console.log('主项目local缓存')
  console.log(portalUseAppList)
}
getLocal()


</script>


<style scoped lang="scss">
.demo-search-container {
  display: flex;
  justify-content: space-between;
}

.cur-table-cell-width {
  max-width: 250px
}
</style>